<template>
<div v-if="visible" id="stencil"></div>
</template>
<script>
  import {Graph, Node, Path, Cell,Shape, Addon} from '@antv/x6'
  export default {
      name: 'stencil',
      data() {
        return {
          visible: true
        }
      },
      mounted() {
        // 初始化 graph
        //this.initGraph()
      },
      methods: {
        initGraph(graph) {
          console.log('parent',this.$parent, 'graph',this.$parent.graph)
          //let graph = this.$parent.getGraph();
          console.log('graph is ',graph)
          // #region 初始化 stencil
          const stencil = new Addon.Stencil({
            title: '流程图',
            target: graph,
            stencilGraphWidth: 300,
            stencilGraphHeight: 180,
            collapsable: false,
            groups: [
              {
                title: '基础流程图',
                name: 'group1',
              }
            ],
            layoutOptions: {
              columns: 1,
              columnWidth: 200,
              rowHeight: 55,
            },
          })
          document.getElementById('stencil').appendChild(stencil.container)
          const r1 = graph.createNode({
            shape: 'start-event',
            label: '开始申请',
            data: {
                bpmnType:'startEvent',
                label: '开始申请',
                initiator: 'applyUserId'
              },
            attrs: {
              body: {
                rx: 20,
                ry: 26,
              },
            },
          })
          const r2 = graph.createNode({
            shape: 'user-task',
            data: {
                      bpmnType:'userTask',
                      label: '审批任务',
                      candidateGroups:'',
                      assignee: ''
                    },
            label: '审批任务',
          })
          const r3 = graph.createNode({
            shape: 'user-task',
            data: {
                      bpmnType:'exclusiveGateway',
                      label: '网关'
            },
            ports: {
                groups: {
                  top: {
                    position: 'top',
                    attrs:
                    {
                      circle: {
                        r: 4,
                        magnet: true,
                        stroke:
                        '#C2C8D5',
                        strokeWidth: 1,
                        style: {
                            visibility: 'hidden',
                        },
                        fill: '#fff'
                      }
                    }
                  },
                  left: {
                    position: 'left',
                    attrs: {
                      circle: {
                        r: 4,
                        magnet:
                        true,
                        stroke: '#C2C8D5',
                        strokeWidth: 1,
                        style: {
                            visibility: 'hidden',
                        },
                        fill: '#fff'
                      }
                    }
                  },
                  bottom: {
                    position: 'bottom',
                    attrs: {
                      circle: {
                        r: 4,
                        magnet:
                        true,
                        stroke: '#C2C8D5',
                        strokeWidth: 1,
                        style: {
                            visibility: 'hidden',
                        },
                        fill: '#fff'
                      }
                    }
                  }
                },
                items: [
                  {
                    group: 'top' // 指定分组名称
                  },
                  {
                    group: 'left' // 指定分组名称
                  },
                  {
                    group: 'bottom' // 指定分组名称
                  }
                ]
              },
            attrs: {
              body: {
                rx: 6,
                ry: 6,
              },
            },
            label: '网关',
          })
          stencil.load([r1, r2, r3], 'group1')
      }
   }
}
</script>
<style>
    #stencil {
      width: 300px;
      height: 100%;
      position: relative;
      background-color: #fff;
      border-right: 1px solid #dfe3e8;
      margin-top: 50px;
      margin-left: 20px;
    }
    .x6-widget-stencil  {
      background-color: #fff;
    }
    .x6-widget-stencil-title {
      background-color: #fff;
    }
    .x6-widget-stencil-group-title {
      background-color: #fff !important;
    }
</style>
